<template>
  <ul class="ds-tags flex justify-center -mx-2">
    <li class="relative inline-block px-3 ml-2 cursor-pointer" v-for="(tag, index) in data" @click.native="onClick(index, tag.value)">
      <div class="absolute z-0 inset-0 bg-blue-100 rounded-full transition" v-if="current === index"></div>
      <div class="relative flex justify-center items-center z-10 text-sm" :class="current === index ? 'text-gray-800' : 'text-white'">{{tag.name}}</div>
    </li>
  </ul>
</template>

<script lang="ts">
import {onMounted, defineComponent, ref} from 'vue'
export default defineComponent({
  name: 'DsLabel',
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    },
    loop: {
      type: Number,
      default: 0
    }
  },
  setup(props, { emit }) {
    const { loop, data } = props
    const { length } = data
    const current = ref(0)
    const onClick = (index: number, value: string) => {
      current.value = index
      emit('change', value)
    }
    onMounted(() => {
      loop && setInterval(() => {
        const {value} = current
        if (value === length - 1) {
          current.value = 0
        } else {
          current.value ++
        }
        onClick(current.value, data[current.value].value)
      }, loop)
    })
    return {
      current,
      onClick
    }
  }
})
</script>
